<template>
  <div>
    <!--      首页条-->
    <index-header></index-header>

    <!--网页主体-->
    <div class="shopCarDiv">
      <h2>
        <i class="el-icon-goods" style="color: rgb(92, 182, 255)"></i
        >&nbsp;我想要：
      </h2>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="图片详情" width="80px">
          <template slot-scope="scope">
            <el-image
              style="width: 100%; height: 100%"
              :src="scope.row.imageUrlList[0]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名" prop="goodName"> </el-table-column>
        <el-table-column width="70" label="价格" prop="goodPrice">
        </el-table-column>
        <el-table-column label="交易方式" prop="transactionMode">
        </el-table-column>
        <el-table-column label="交易地点" prop="goodAddress"> </el-table-column>
        <el-table-column label="发布人微信" prop="userWechat">
        </el-table-column>
        <el-table-column label="商品类型" prop="goodCategory">
        </el-table-column>
        <el-table-column label="商品描述" prop="goodDescription">
        </el-table-column>
        <el-table-column label="商品发布时间" prop="postTime">
        </el-table-column>

        <el-table-column align="right" width="200">
          <template slot="header" slot-scope="scope">
            <el-row style="position: relative">
              <el-col span="24">
                <el-input
                  v-model="queryinfo.query"
                  size="mini"
                  placeholder="输入商品名搜索"
                >
                  <el-button @click="clicksearch" icon="el-icon-search" slot="append"></el-button>
                </el-input>
              </el-col>

            </el-row>
          </template>
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="danger"
              @click="handleEdit(scope.$index, scope.row)"
              >我不想要</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="18" :offset="1">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.pageNum"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="queryinfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <!--      删除结果提示框-->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div style="text-align: center">
        <h4>{{ dialogValue }}</h4>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="clickButton"
            style="margin-top: 30px"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>

    ？
    <!--      首页尾-->
    <index-footer></index-footer>
  </div>
</template>

<script>
import IndexHeader from "./index-header";
import IndexFooter from "./index-footer";
export default {
  name: "shopCar",
  data() {
    return {
      queryinfo:{
        pageNum: 1, //初始页
        pageSize: 5, //每页的数据
        query: ''
      },
      tableData: [],
      prouductImg: "",
      total: 0,
      dialogValue: "",
      centerDialogVisible: false,
      centerDialogVisible2: false,
      dialogValue2: "",
      imagarea: [],
    };
  },
  components: {
    IndexHeader,
    IndexFooter,
  },

  mounted() {
    this.initShopCar();
  },

  methods: {
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
      this.queryinfo.pageSize = size;
      this.initShopCar();
      // console.log(this.pageSize)  //每页下拉显示数据
    },
    showCampusImage(scope) {
      console.log(scope.imageUrlList);
    },
    handleCurrentChange: function (currentPage) {
      this.queryinfo.pageNum = currentPage;
      this.initShopCar();
      // console.log(this.currentPage)  //点击第几页
    },

    handleEdit(index, row) {
      //点击了删除按钮
      // console.log(index, row);
      let jsonObj = {};

      jsonObj.goodId = row.goodId;

      jsonObj.userId = window.sessionStorage.getItem("userId");

      let self = this;

      $.ajax({
        type: "POST",
        url: "http://waiterxiaoyy.free.idcfengye.com/web/deleteIwantTraceById",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(jsonObj),
        success: function (data) {
          if (data.code === 200) {
            self.initShopCar();
            self.$message.success(data.msg);
          } else {
            self.$message.error(data.msg);
          }
        },
      });
    },

    clickButton() {
      this.centerDialogVisible = false;
    },

    initShopCar() {
      //重载数据
      let self = this;

      let jsonObj = {};
      jsonObj.pageNum = self.queryinfo.pageNum;
      jsonObj.pageSize = self.queryinfo.pageSize;
      jsonObj.query = self.queryinfo.query;
      jsonObj.userId = window.sessionStorage.getItem("userId");

      $.get(
        "http://waiterxiaoyy.free.idcfengye.com/web/getIwantList",
        jsonObj,
        function (data) {
          if (data.code === 200) {
            self.tableData = data.data;
            self.total = data.count;
          }
        },
        "json"
      );
    },
    clicksearch() {
      this.initShopCar()
    }
  },
};
</script>

<style scoped>
.shopCarDiv {
  width: 80%;
  margin: 0 auto;
  padding-top: 80px;
}

.searchgoods {
}
</style>
